    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>回调函数--重新封装缓动函数</title>
        <style>
            #box{
                border: 1px solid #999999;
                background-color: #34fff4;
                position: absolute;
                width: 100px;
                height: 80px;
                margin: 10px auto;
                top:30px;
                left: 0;
            }
        </style>
    </head>
    <body>
    <button>一键变换</button>
        <div id="box"></div>
    <script>
        //需求：点击button，div会变长变宽，然后又返回原来的值
        //知识点：回调函数  自己在形参中调用自己
        var btn=document.getElementsByTagName('button')[0];
        var box=document.getElementById('box');
        btn.onclick=function () {
       var json1={"width":400,"height":300,"left":200,"top":200};
       var json2={"width":600,"height":500,"left":400,"top":400};
               animo(box,json1,function () {
                       animo(box,json2,function () {
                            animo(box,json1);
                       });
               });
        };

   function animo(ele,json,fn) {
          clearInterval(ele.timer);

          ele.timer=setInterval(function () {
              var bool=true;
        for (var k in json){
             var present=parseInt(getStyle(ele,k))||0;
             var space=(json[k]-present)/10;
             space=space>0?Math.ceil(space):Math.floor(space);

            present=present+space;

            ele.style[k]=present+"px";

        if (json[k]!==present){
          bool=false;
        }
    }
    console.log("看到此消息证明还么有清楚计时器");
        if(bool){
                  clearInterval(ele.timer);
                  if (fn){
                      fn();
                  }
              }
          },10)
     }
   function getStyle(ele,zhi) {
       if (window.getComputedStyle(ele)){
           return window.getComputedStyle(ele,null)[zhi];
       }
         return  ele.currentStyle[zhi];
     }
    </script>
    </body>
    </html>